import { Card, Form, Input, Button } from 'antd'
import logo from '@/assets/react.svg'
import './index.scss'
import { useDispatch } from 'react-redux'
import { fetchLogin, fetchGetUserInfo } from '@/store/modules/user'
import { message } from 'antd'
import { useNavigate } from 'react-router-dom'
const Login = () => {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const onFinish = async (value) => {
        value.userType = 1
        try {
           await  Promise.all([await dispatch(fetchLogin(value)), await dispatch(fetchGetUserInfo())])
            navigate('/')
            message.success('登录成功')
        } catch (error) {
            console.log(error);
        }

    }
    return (
        <div className='login'>
            <Card className='login-container'>
                <img className='login-logo' src={logo} alt='logo'></img>
                <Form onFinish={onFinish}>
                    <Form.Item name='account' rules={[{ required: true, message: '请输入账号' }]}>
                        <Input size='large' placeholder='请输入手机号'></Input>
                    </Form.Item>
                    <Form.Item name='password' rules={[{ required: true, message: '请输入密码' }]}>
                        <Input type='password' size='large' placeholder='请输入密码'></Input>
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary' htmlType='submit' size='large' block>登录</Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}
export default Login